<template>
  <router-view />
</template>

<style>
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', SimSun, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  height: 100%;
  width: 100%;
}
</style>

<script>
export default {
  name: 'App',
  mounted() {
    // 彻底解决 ResizeObserver 循环错误
    this.setupResizeObserverErrorHandler();
  },
  methods: {
    setupResizeObserverErrorHandler() {
      // 1. 拦截控制台错误
      const originalConsoleError = console.error;
      console.error = (...args) => {
        if (args[0] && (
          (typeof args[0] === 'string' && args[0].includes('ResizeObserver loop')) ||
          (args[0] instanceof Error && args[0].message && args[0].message.includes('ResizeObserver loop'))
        )) {
          // 忽略此错误
          return;
        }
        originalConsoleError.apply(console, args);
      };

      // 2. 拦截 window 错误事件
      window.addEventListener('error', (event) => {
        if (event.message && event.message.includes('ResizeObserver loop')) {
          event.stopImmediatePropagation();
          event.preventDefault();
          return false;
        }
      }, true);

      // 3. 监视并移除错误覆盖层
      const observer = new MutationObserver(() => {
        const overlayError = document.getElementById('webpack-dev-server-client-overlay');
        if (overlayError) {
          const text = overlayError.textContent || overlayError.innerText;
          if (text && text.includes('ResizeObserver loop')) {
            overlayError.style.display = 'none';
            document.body.style.overflow = 'auto';
          }
        }
      });
      observer.observe(document.body, { childList: true, subtree: true });
    }
  }
}
</script>
